<template>
    <div class="gameList">
        <div @click="toGame" title="欢乐斗地主" class="ddz-logo"></div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
let toGame = () => {
    router.push('game')
}
</script>


<style scoped lang="less">
.gameList {
    width: 100%;

    .ddz-logo {
        background-image: url('/images/game-logo.png');
        background-size: cover;
        background-repeat: no-repeat;
    }

    &>div {
        float: left;
        width: 25%;
        height: 200px;
        border: 5px solid #eeeeee;
        border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        user-select: none;
        transition: .3s;

        &:hover {
            transform: scale(1.1);
        }
    }
}
</style>